/* 中文注释：全局主题与质感样式（品牌色、阴影、卡片、文本与工具类） */

$brand: #FF6B00;
$bg-gray: #f6f7f9;
$text-main: #1f2d3d;
$text-sub: #6b7c93;
$text-muted: #999;
$border: #eaeaea;

/* 统一阴影层级 */
@mixin shadow-sm { box-shadow: 0 4rpx 14rpx rgba(0,0,0,0.06); }
@mixin shadow-md { box-shadow: 0 8rpx 24rpx rgba(0,0,0,0.08); }
@mixin shadow-lg { box-shadow: 0 12rpx 36rpx rgba(0,0,0,0.10); }

/* 卡片通用样式 */
.card {
  background: #fff;
  border-radius: 16rpx;
  padding: 20rpx;
  @include shadow-md;
}

/* 玻璃态卡片 */
.glass {
  background: rgba(255,255,255,0.75);
  backdrop-filter: saturate(180%) blur(14rpx);
  -webkit-backdrop-filter: saturate(180%) blur(14rpx);
  border: 1rpx solid rgba(255,255,255,0.4);
  border-radius: 20rpx;
}

/* 标题体系 */
.title-1 { font-size: 36rpx; font-weight: 700; color: $text-main; }
.title-2 { font-size: 30rpx; font-weight: 600; color: $text-main; }
.title-3 { font-size: 26rpx; font-weight: 600; color: $text-main; }
.muted { color: $text-muted; }
.subtle { color: $text-sub; }

/* 圆角工具 */
.rounded { border-radius: 16rpx; }
.rounded-md { border-radius: 20rpx; }
.rounded-lg { border-radius: 24rpx; }

/* 间距工具 */
.mt-8 { margin-top: 8rpx; }
.mt-12 { margin-top: 12rpx; }
.mt-16 { margin-top: 16rpx; }
.mb-12 { margin-bottom: 12rpx; }
.p-16 { padding: 16rpx; }
.p-20 { padding: 20rpx; }

/* 边框与分割线 */
.divider { height: 1rpx; background: $border; width: 100%; }
.border { border: 1rpx solid $border; }

/* 统一品牌色覆盖（通用元素） */
a { color: $brand; }

/* uv-ui 常用组件的轻度样式覆盖（不破坏功能） */
/* 使用 :deep 以兼容 scoped 环境下的穿透 */
:root {
  /* 可选：提供 CSS 变量，用于需要以变量读取的组件 */
  --brand: #{$brand};
}

/* 覆盖 uv-button 主色（若 uv-ui 使用当前主色变量，将自动生效） */
:deep(.uv-button--primary) {
  background: $brand;
  border-color: $brand;
}
:deep(.uv-button--primary.is-plain) {
  color: $brand;
  background: #fff;
  border-color: rgba(255, 107, 0, 0.4);
}

/* 标签轻度样式 */
:deep(.uv-tags--primary.is-plain) {
  color: $brand;
  border-color: rgba(255, 107, 0, 0.4);
}

/* Tabs 滑块色与激活色（若组件支持继承颜色，将受 $uni-color-primary 影响） */
:deep(.uv-tabs__line) { background-color: $brand; }
:deep(.uv-tabs__item.is-active) { color: $brand; }

/* 列表背景统一灰 */
.page-gray { background: $bg-gray; min-height: 100vh; }
